<template>
  <!-- '/article/' + item.art_id不直观 -->
  <!-- `/article/${item.art_id}`还可以 -->
  <!-- cell单元格的属性和vue-router是一样的 -->
  <div>
    <van-cell
      v-for="item in Newslist"
      :key="item.art_id.toString()"
      class="newsCell"
      :to="{
        // 根据路由名称来写
        name: 'article',
        params: {
          id: item.art_id
        }
      }"
    >
      <h3 slot="title" class="cellTitle van-multi-ellipsis--l2">
        {{ item.title }}
      </h3>
      <template slot="extra" v-if="item.cover.images.length === 1">
        <van-image
          v-for="(img, index) in item.cover.images"
          :key="index"
          fit="cover"
          :src="img"
          class="extraImg"
        />
      </template>
      <template slot="label" v-if="item.cover.images.length > 1">
        <div class="label-img-box">
          <van-image
            v-for="(img, index) in item.cover.images"
            :key="index"
            fit="cover"
            :src="img"
          />
        </div>
      </template>
      <template slot="label">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}评论</span>
        <span>{{ item.pubdate | relativeTime }}</span>
      </template>
    </van-cell>
  </div>
</template>

<script>
export default {
  name: 'article-cell',
  props: {
    Newslist: {
      type: Array,
      required: true
    }
  }
}
</script>

<style lang="less" scoped>
.newsCell {
  .extraImg {
    width: 232px;
    height: 146px;
    margin-left: 25px;
  }
  .label-img-box {
    display: flex;
    width: 100%;
    padding: 30px 0;
    .van-image {
      flex: 1;
      height: 146px;
      &:not(:last-child) {
        padding-right: 4px;
      }
    }
  }

  span {
    margin-right: 25px;
    font-size: 22px;
    color: #b4b4b4;
  }

  h3 {
    max-width: 343 * 2px;
    font-size: 32px;
    color: #3a3a3a;
  }
}
</style>
